<template>
  <div class="flex items-center no-wrap full-width">
    <q-img width="68px" :ratio="1" :src="item.images[0].thumb" />
    <div class="q-px-sm content-box">
      <div class="text-bold ellipsis" style="font-size: 16px;">{{ item.material_name }}</div>
      <div class="text-grey-8 ellipsis" style="height: 21px;">{{ item.material_model }}</div>
      <div class="text-grey-8 ellipsis" style="height: 21px;">{{ item.price }}元 x <a class="text-red text-bold" style="font-size: 16px">{{ item.amount }}</a>{{ item.material_unit }}</div>
    </div>
    <div style="width: 100px;" class="text-right">
      <div class="text-bold text-red" style="font-size: 14px; line-height: normal;">¥<a style="font-size:24px;">{{ splitMoney(item.price * item.amount)[0] }}</a>{{ splitMoney(item.price * item.amount)[1] }}</div>
      <q-btn label="已配送" :icon="item.deliveryExpand ? 'expand_less' : 'expand_more'" color="orange" dense outline size="sm" v-if="item.t_delivery_details && item.t_delivery_details.length > 0"  @click="item.deliveryExpand = !item.deliveryExpand"/>
    </div>
  </div>
  <div v-if="item.deliveryExpand">
    <q-list padding dense>
      <q-item v-for="(delivery, idx) in item.t_delivery_details" :key="idx">
        <q-item-section>
          <q-item-label><q-badge color="blue">{{ idx + 1 }}</q-badge> {{ delivery.logistics }}</q-item-label>
          <q-item-label caption>配送时间：{{ delivery.delivery_date }}</q-item-label>
          <q-item-label caption>配送数量：{{ delivery.deliver_amount }} {{ item.material_unit }}</q-item-label>
        </q-item-section>

        <q-item-section side top>
          <q-item-label>{{ delivery.logistics_no }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </div>
  <q-separator class="q-my-sm" inset="item" />
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'settleItem',
  props: {
    item: Object
  },
  methods: {
    splitMoney (money) {
      const arr = String(Number(Number(money).toFixed(2))).split('.');
      if (arr.length === 1) {
        return [arr[0], ''];
      } else {
        return [arr[0], '.' + arr[1]];
      }
    }
  }
});
</script>

<style lang="scss" scoped>
.content-box {
  flex: 1;
}
</style>
